<template>
    <div>
      <ul>
      <li v-for="(m, index) in messages" :key="m.id">
        <!-- <router-link :to="'/home/message/detail/' + m.id">{{m.title}}</router-link> -->
        <router-link :to="{name: 'detail', params: {id: m.id}}">{{m.title}}</router-link>
        --<button @click="pushShow(m.id)">push查看</button>
        --<button @click="replaceShow(m.id)">replace查看</button>
      </li>
    </ul>

    <button @click="$router.back()">返回</button>
    <button @click="$router.forward()">前进</button>

    <hr>

    <router-view></router-view>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'Message'
  }
</script>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';

  interface Message {
    id: number;
    title: string;
  }

  const messages = ref<Message[]>([])

  onMounted(() => {
    setTimeout(() => {
      const data: Message[] = [
        {id: 1, title: 'message001'},
        {id: 3, title: 'message003'},
        {id: 4, title: 'message004'},
      ]
      messages.value = data
    }, 1000);
  })

  const router = useRouter()
  // 编程式路由导航(跳转) push模式
  const pushShow = (id: number) => {
    router.push(`/home/message/detail/${id}`)
    // router.push({name: 'detail', params: {id}})
  }

  // 编程式路由导航(跳转) replace模式
  const replaceShow = (id: number) => {
    // router.replace(`/home/message/detail/${id}`)
    router.replace({name: 'detail', params: {id}})
  }
</script>

<style scoped>

 
</style>
